<template>
  <template v-if="slotConfig">
    <!-- 如果是组件类型的插槽内容 -->
    <component
      v-if="slotConfig.isComponent && slotConfig.content"
      :is="slotConfig.content"
      v-bind="slotConfig.props || {}"
    />
    <!-- 如果是文本类型的插槽内容 -->
    <span v-else v-html="slotConfig.content || ''"></span>
  </template>
  <!-- 如果没有插槽配置，则显示插槽属性 -->
  <template v-else-if="slotProps">
    <pre>{{ JSON.stringify(slotProps, null, 2) }}</pre>
  </template>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ComponentSlotContent',
  props: {
    slotConfig: {
      type: Object,
      default: null
    },
    availableComponents: {
      type: Array,
      default: () => []
    },
    slotProps: {
      type: Object,
      default: null
    }
  }
})
</script>